<template>
  <div class="wrapper___1FgTI">
    <div class="top___3yfLV"></div>
    <div class="backTag___3U5Kk" @click="goHome">返回疫情动态</div>
    <div class="body___33s9f">
      <div class="cityPickerWrap___f8kyW">
        <div class="title___2CRHl">
          <img src="../assets/img/policy_icon1.png" alt>
          <span class="main___12kwc">出行防疫政策查询</span>
          <span class="tips___1KUoF">更多地区持续添加中</span>
        </div>
        <div class="picker___1OmQA">
          <div class="city___2MLBU">
            <div class="city_wrap">
              <div class="selected___2Z94q" @click="goFunc">
                {{formInfo.city_name}}
                <img class src="../assets/img/policy_icon2.png" alt>
              </div>
            </div>
          </div>
          <img @click="goFunc" class="exchange___1bK42" src="../assets/img/policy_icon.png" alt>
          <div class="city___2MLBU">
            <div class="city_wrap">
              <div class="selected___2Z94q" @click="goFunc">
                {{toInfo.city_name}}
                <img class src="../assets/img/policy_icon2.png" alt>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="root___3CMLp">
        <div class="wrapper___1hmWd">
          <div class="loop-show-box___2Fl4m">
            <ul class="marquee-content___2-t2r">
              <li class="li-style___10qjL">
                <div class="leftText___3y68d">最新</div>
                <div class="message___2b-N5">多地出现确诊病例，关键时期请接力倡议</div>
                <div class="rightIcon___2WnOx" @click="goFunc">
                  <img src="../assets/img/policy_icon3.png" alt>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="card___zye4Y">
        <div class="block___1b3We">
          <div class="left___2q5cl">
            <div class="line___3UN60"></div>
          </div>
          <div class="right___1Nex-">
            <div class="city___w62dr dot___2VO2C header-1___1ljNr">
              <div class="cityWrapper___2t-U6">
                <div class="cityName___1kz1c">出{{formInfo.city_name}}</div>
                <div class="cityRisk___1OqEN">
                  <span>低风险</span>
                </div>
              </div>
              <span class="cityProvince___EQmV3 singleRowEllipsis btn-1___2A3Cf">
                <a
                  class="aColor"
                  href="https://ask.dxy.com/index#/activity-share?activity_id=163"
                >订阅变动</a>
              </span>
            </div>
            <div class="policyBlock___APnCN fromPolicyBlock___2lwAo">
              <div class="expandBox___qeZHs">
                <div class="description___vMNNF">{{formInfo.high_in_desc}}</div>
                <div class="description___vMNNF">{{formInfo.low_in_desc}}</div>
                <div class="description___vMNNF">{{formInfo.out_desc}}</div>
              </div>
            </div>
            <div class="city___w62dr dot___2VO2C header-1___1ljNr">
              <div class="cityWrapper___2t-U6">
                <div class="cityName___1kz1c">进{{toInfo.city_name}}</div>
                <div class="cityRisk___1OqEN">
                  <span>低风险</span>
                </div>
              </div>
              <span class="cityProvince___EQmV3 singleRowEllipsis btn-1___2A3Cf">
                <a
                  class="aColor"
                  href="https://ask.dxy.com/index#/activity-share?activity_id=163"
                >订阅变动</a>
              </span>
            </div>
            <div class="policyBlock___APnCN fromPolicyBlock___2lwAo">
              <div class="expandBox___qeZHs">
                <div class="description___vMNNF">{{toInfo.high_in_desc}}</div>
                <div class="description___vMNNF">{{toInfo.low_in_desc}}</div>
                <div class="description___vMNNF">{{toInfo.out_desc}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "PrevPolicyView",
  props: ["citys"],
  data() {
    return {
      formInfo: [],
      toInfo: []
    };
  },
  mounted() {
    console.log(this.citys);
    // http://iwenwiki.com/wapicovid19/query.php?from=10003&to=10004&key=171e165a7d991c5f6ecd5194c54778ef
    axios
      .get(
        `http://iwenwiki.com/wapicovid19/query.php?from=${
          this.citys[0].value
        }&to=${this.citys[1].value}&key=${"171e165a7d991c5f6ecd5194c54778ef"}`
      )
      .then(res => {
        console.log(res.data);
        this.formInfo = res.data.result.from_info;
        this.toInfo = res.data.result.to_info;
      });
  },
  methods: {
    goFunc() {
      this.$notify({ type: "warning", message: "此功能未开发" });
    },
    goHome() {
      this.$router.go("/");
    }
  }
};
</script>
<style scoped lang="less">
/* 引入PrevPolicyView页面的样式文件 */
@import "../assets/css/policy.less";
.aColor {
  color: #23c79b;
  font-size: 0.12rem !important;
}
/* 
.wrapper {
  min-height: 100vh;
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC,
    Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  background-color: #f7f7f7;
  border-bottom: 0.01rem solid transparent;
  -webkit-overflow-scrolling: touch;
  .top {
    position: relative;
    width: 100%;
    height: 0;
    margin-bottom: -44%;
    padding-top: 74.7%;
    color: #fff;
    background: url(../assets/img/policy.png) no-repeat;
    background-size: cover;
  }
  .backTag {
    position: absolute;
    top: 0.12rem;
    right: 0.12rem;
    padding: 0.045rem 0.12rem;
    color: #fff;
    font-weight: 400;
    font-size: 0.11rem;
    line-height: normal;
    background-color: rgba(19, 15, 133, 0.5);
    border-radius: 0.12rem;
  }
  .body___33s9f {
    position: relative;
    z-index: 1;
    .cityPickerWrap {
      position: relative;
      margin: 0 0.16rem;
      padding: 0.15rem 0.1rem;
      color: #333;
      font-weight: 500;
      font-size: 0.16rem;
      line-height: 1.13;
      background-color: #fff;
      border: 0.005rem solid #ebebeb;
      border-radius: 0.06rem;
      box-shadow: 0 0.02rem 0.06rem 0 rgb(0 0 0 / 5%);
      .title___2CRHl {
        display: flex;
        align-items: center;
        margin-bottom: 0.12rem;
        img {
          width: 0.2rem;
          height: 0.2rem;
          margin-right: 0.04rem;
        }
        .main___12kwc {
          flex-grow: 1;
          font-weight: 700;
        }
        .tips___1KUoF {
          float: right;
          color: #999;
          font-weight: 400;
          font-size: 0.12rem;
        }
      }
      .picker___1OmQA {
        display: flex;
        align-items: center;

        height: 0.48rem;
        background-color: #f7f7f7;
        border-radius: 0.06rem;
        .city___2MLBU {
          flex-grow: 1;
          width: 2.8rem;
          color: #999;
          font-weight: 400;
          text-align: center;
          .city_wrap {
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .selected___2Z94q {
            color: #333;
            font-weight: 500;
            img {
              width: 0.12rem;
              height: 0.12rem;
              margin-left: 0.05rem;
            }
          }
        }
        .exchange___1bK42 {
          flex-shrink: 0;
          width: 0.14rem;
          height: 0.14rem;
          margin: 0 0.13rem;
        }
      }
    }
    .root___3CMLp {
      padding: 0.1rem 0.16rem;
      .wrapper___1hmWd {
        position: relative;
        display: flex;
        align-items: center;
        height: 0.4rem;
        padding: 0 0.12rem;
        overflow: hidden;
        color: #333;
        font-size: 0.14rem;
        background-color: #fff;
        border-radius: 0.06rem;
        .loop-show-box___2Fl4m {
          position: relative;
          width: 100%;
          height: 0.2rem;
          overflow: hidden;
          line-height: 0.2rem;
          .marquee-content___2-t2r {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            z-index: 2;
            height: 0.2rem;
            transition-timing-function: ease-in-out;
            transition-property: top;
            .li-style___10qjL {
              position: relative;
              display: flex;
              align-items: center;
              height: 0.2rem;
              padding-right: 0.2rem;
              overflow: hidden;
              color: #333;
              line-height: 0.17rem;
              white-space: nowrap;
              text-overflow: ellipsis;
              .leftText___3y68d {
                flex: none;
                padding: 0 0.03rem;
                color: #f74c31;
                font-size: 0.12rem;
                line-height: 0.17rem;
                vertical-align: middle;
                background-color: #ffefed;
                border-radius: 0.02rem;
              }
              .message___2b-N5 {
                flex: auto;
                margin-left: 0.08rem;
                overflow: hidden;
                font-size: 0.14rem;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .rightIcon___2WnOx {
                position: absolute;
                top: 50%;
                right: 0;
                z-index: 1;
                flex: none;
                width: 0.12rem;
                height: 0.12rem;
                margin-top: -0.06rem;
                img {
                  display: block;
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
    }
  }
} */
</style>
